<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>个人中心</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css" />
      <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    	<link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
      <link rel="stylesheet" type="text/css" href="../../css/common.css" />
      <style>
          html, body {width: 100%;min-height: 100%;background: #fff;}
          .aui-active .aui-bar-tab-label{
            color: #f5a51c
          }
          .login {height:240px;background-image: -webkit-linear-gradient(0deg, #f5c674, #ed824c);/*background-image: url(../../image/personal_bkg.jpg);background-repeat: no-repeat; background-size: cover;*/position: relative;}
      	.login .personal_logo {width: 4rem;height: 4rem;border-radius: 50%;margin: 0 auto 9px;/*position: absolute; top: 60px; left: 20px;*/}
      		.login .userinfo {position: absolute; top: 60px;text-align: center; left: 0; right: 0;}
      		.login .userinfo .title {font-size: 0.8rem; color: #fff;}

      		/* 设置条目 */
      		.item {height: 3rem;line-height: 3rem;padding-left: 0.7rem;background-color: #fff;}
      		.item_ico {float: left;width: 2.3rem;padding: 0.7rem 0.7rem 0.7rem 0;}
      		.item_arrow {float: right;width: 1.5rem;padding: 1rem 0.7rem 1rem 0;}
      		.item span {font-size: 0.7rem;}
          [v-cloak] {
              display: none;
          }
        #tab1 .aui-active{
          color: #f23030;
          border-bottom: 2px solid #f23030;
        }
        .aui-list-item-middle{
          padding-left: 0.75rem;
        }
        .aui-radio:checked{
          background-color: #f23030;
          border: solid 1px #f23030;
        }
        .aui-toast-content{
          color: #fff;
        }
        .login_title{
          font-size: 1.2rem;
          text-align: center;
          font-weight: 600;
          margin-top: 1rem;
        }
        .login_title_en{
          text-align: center;
          color: #827a7a;
          margin-bottom: 1rem;
        }
        .aui-list{
              background-image: none;
        }
      </style>
  </head>
  <body>
<div id="app" style="box-sizing:border-box">
  <div class="aui-tab" id="tab1" style="justify-content:center;">
    <div class="aui-tab-item aui-active" style="width: 3.3rem;margin-right:0.8rem;font-size: 0.8rem;">密码登录</div>
    <div class="aui-tab-item" style="width: 3.3rem;margin-left:0.8rem;font-size: 0.8rem;">短信登录</div>
  </div>
  <div id="tab1-con">
      <div id="tab1-con1">
        <div class="login_title">欢迎回来</div>
        <div class="login_title_en">Welcome back</div>

        <ul class="aui-list aui-form-list" style="margin-top: 1.2rem;" id="login_content_1">
            <li class="aui-list-item" style="height: 3rem;">
                <div class="aui-list-item-inner" style="border-bottom: 1px solid #eee;">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-mobile"></i>
                    </div>
                    <div class="aui-list-item-input">
                        <input type="Number" placeholder="请输入手机号"   v-model="phone">
                    </div>
                    <div class="aui-list-item-label-icon" style="width: 1rem;height:1rem">
                       <img src="../../image/my/m64.png" alt="" @click="clearPhoone">
                    </div>
                </div>
            </li>
            <li class="aui-list-item" style="height: 3rem;">
                <div class="aui-list-item-inner" style="border-bottom: 1px solid #eee;">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-lock"></i>
                    </div>
                    <div class="aui-list-item-input">
                        <input type="password" placeholder="请输入登录密码" v-model="password" class="registerPassword">
                    </div>
                    <div class="aui-list-item-label-icon"  @click="isShowPassword">
                        <i class="aui-iconfont aui-icon-display"></i>
                    </div>
                </div>
            </li>
            <li>  <div style="color:#f23030;font-size:0.7rem;text-align:right;margin-right:0.4rem;margin-top:1rem" @click="forgetPassword">忘记密码？</div></li>
        </ul>
        <ul class="aui-list aui-form-list" style="margin-top: 1.2rem;display:none" id="login_content_2">
            <li class="aui-list-item" style="height: 3rem;">
                <div class="aui-list-item-inner" style="border-bottom: 1px solid #eee;">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-mobile"></i>
                    </div>
                    <div class="aui-list-item-input">
                        <input type="Number" placeholder="请输入手机号"  v-model="phone">
                    </div>
                    <div class="aui-list-item-label-icon" style="width: 1rem;height:1rem;">
                       <img src="../../image/my/m64.png" alt="" @click="clearPhoone">
                    </div>
                </div>
            </li>
            <li class="aui-list-item" style="height: 3rem;">
                <div class="aui-list-item-inner" style="border-bottom: 1px solid #eee;">
                    <div class="aui-list-item-label-icon">
                        <img src="../../image/my/m65.png" alt="" style="width: 1rem;">
                    </div>
                    <div class="aui-list-item-input">
                        <input type="password" placeholder="请输入验证码" style="border-right: 1px solid #eee;" v-model="code">
                    </div>
                    <div class="aui-list-item-label-icon" style="width: 6rem;">
                        <div style="color:#f23030;" @click="sendcode">{{codeMsg}}</div>
                    </div>
                </div>
            </li>
        </ul>

        <div style="width:80vw;margin:0 auto;background:#F62525;color:#fff;text-align:center;height:2.2rem;line-height:2.2rem;margin-top: 1.5rem;border-radius:1.5rem;" @click="mylogin">登录</div>
        <div style="font-size:0.7rem;margin-top:0.5rem;text-align:center;color:#7F7F7F">还没有账号？ <div style="color:#f23030;font-size:0.7rem;display:inline-block;" onclick="myregister()">立即注册</div></div>
        <div style="display:flex;align-items:center;justify-content:space-around;width: 72vw;margin: 0 auto;margin-top:1rem;">
          <div style="color:#999">—————</div>
          <div style="color:#7F7F7F;font-size:0.7rem;"> 第三方登录 </div>
          <div style="color:#999">—————</div>
        </div>
        <div style="display:flex;align-items:center;justify-content:space-around;margin-top:1.2rem;">
            <img src="../../image/my/m62.png" alt="" style="width: 2.5rem;margin-right: -5rem;" @click="wxLogin">
            <img src="../../image/my/m63.png" alt="" style="width: 2.5rem;" @click="qqLogin">
        </div>
      </div>
      <div id="tab1-con2" class="aui-hide">content2222</div>

  </div>
</div>

  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/zepto.js"></script>
  <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript" src="../../script/utils.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
  <script type="text/javascript" src="../../script/aui-tab.js"></script>
  <script type="text/javascript" src="../../script/aui-scroll.js"></script>
  <script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
  <script type="text/javascript" src="../../script/aui-toast.js"></script>
  <script type="text/javascript" src="../../script/axios.min.js"></script>

  <script type="text/javascript">
    function myregister(){
      api.openWin({
          name: 'register',
          url: './headerone.html',
          pageParam: {
              msg:'用户注册',
              url:'./register.html'
          }
      });

    }
   function orderClose(type){
      $api.css(order_bounced,'display:'+type)
   }


      apiready = function(){
        //api.parseTapmode();

        // setRefresh()
      };
      //刷新
      function setRefresh() {
          var pullRefresh = new auiPullToRefresh({
              container: document.querySelector('.aui-refresh-content'),
              triggerDistance: 100
          }, function(ret) {
              if (ret.status == "success") {
                  setTimeout(function() {
                      pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                  }, 1500)
              }
          })
      }

  </script>
  <script>
  apiready = function(){
    // alert(JSON.stringify(api))
     var toast = new auiToast({});

    new Vue({
      el:'#app',
      data:{
          phone:'',
          password:'',
          code:'',
          type:1,
          codeMsg:'发送验证码',
          isclick:true
      },
      methods:{
        //第三方登录qq
        qqLogin:function(){
          var qq = api.require('QQPlus');
          qq.installed(function(ret, err) {
              if (ret.status) {
                qq.login(function(val, err) {
                    if (ret.status) {
                    //  api.alert(JSON.stringify(ret) );
                      qq.getUserInfo(function(retText, err) {
                          if (ret.status) {
                              api.alert(JSON.stringify(ret) );
                              api.ajax({
                                  url: window.Url.Freeuser_threeRartyLanding,
                                  method: 'post',
                                  data: {
                                      values: {
                                          openid:val.openId,
                                          nickname:JSON.stringify(retText.info).nickname,
                                          type:3,
                                          imgurl:JSON.stringify(retText.info).figureurl_qq_2,
                                          push_id: $api.getStorage('ajpushId')
                                      }
                                  }
                              },function(ret, err){
                                //alert(JSON.stringify(ret))
                                if (ret.re==1){
                                    // alert('登录-----' + JSON.stringify(ret))
                                    $api.setStorage('token', ret.data.token);
                                    $api.setStorage('user_id', ret.data.user_id);
                                    $api.setStorage('rong-token', ret.data.chat_id);
                                    $api.setStorage('user_name', ret.data.username);
                                    $api.setStorage('user_data', ret.data);
                                    var jsfun = 'window.location.reload();';
                                    api.execScript({
                                        name: 'root',
                                        frameName: 'five_frame/index.html',
                                        script: jsfun
                                    });
                                    api.closeWin({
                                        name: 'login'
                                    });

                                } else if(ret.re==2){
                                      api.openWin({
                                          name: 'bind',
                                          url: './five_frame_header2.html',
                                          pageParam: {
                                            type:'绑定手机号',
                                            name:'bindAccount',
                                            data:val.openId,
                                            zh_type:JSON.stringify(retText.info).figureurl_qq_2,
                                            code:JSON.stringify(retText.info).nickname,
                                            password:3
                                          }
                                      });

                                }else{
                                  toast.fail({
                                    title:ret.info,
                                    duration:1000
                                  })
                                }
                              });


                          } else {
                              //api.alert(JSON.stringify(err) );
                          }
                      });
                                          }
                });
              } else {
                toast.fail({
                  title:'没有安装',
                  duration:1000
                })
              }
          });
        },
        //第三方登录微信
        wxLogin:function(){
          var wx = api.require('wx');
            wx.auth({
                apiKey: 'wxd5baa72b2d041d55'
            }, function(ret, err) {
                if (ret.status) {
                    //alert(JSON.stringify(ret.code));
                    wx.getToken({
                        apiKey: 'wxd5baa72b2d041d55',
                        apiSecret: '82f1ef40abf23d6f5b5ed4d43ccb7bd1',
                        code: ret.code
                    }, function(ret, err) {
                        if (ret.status) {
                          wx.getUserInfo({
                            accessToken: ret.accessToken,
                            openId: ret.openId
                          }, function(val, err) {
                            if (val.status) {
                                api.ajax({
                                    url: window.Url.Freeuser_threeRartyLanding,
                                    method: 'post',
                                    data: {
                                        values: {
                                            openid:val.openid,
                                            nickname:val.nickname,
                                            type:2,
                                            imgurl:val.headimgurl,
                                            push_id: $api.getStorage('ajpushId')
                                        }
                                    }
                                },function(ret, err){
                                  //alert(JSON.stringify(ret))
                                  if (ret.re==1){
                                      // alert('登录-----' + JSON.stringify(ret))
                                      $api.setStorage('token', ret.data.token);
                                      $api.setStorage('user_id', ret.data.user_id);
                                      $api.setStorage('rong-token', ret.data.chat_id);
                                      $api.setStorage('user_name', ret.data.username);
                                      $api.setStorage('user_data', ret.data);
                                      var jsfun = 'window.location.reload();';
                                      api.execScript({
                                          name: 'root',
                                          frameName: 'five_frame/index.html',
                                          script: jsfun
                                      });
                                      api.closeWin({
                                          name: 'login'
                                      });


                                  } else if(ret.re==2){
                                        api.openWin({
                                            name: 'bind',
                                            url: './five_frame_header2.html',
                                            pageParam: {
                                              type:'绑定手机号',
                                              name:'bindAccount',
                                              data:val.openid,
                                              zh_type:val.headimgurl,
                                              code:val.nickname,
                                              password:2
                                            }
                                        });

                                  }else{
                                    toast.fail({
                                      title:ret.info,
                                      duration:1000
                                    })
                                  }
                                });

                            } else {
                              toast.fail({
                                title:ret.info,
                                duration:1000
                              })
                            }
                          });
                        } else {
                            alert(err.code);
                        }
                    });
                } else {
                  toast.fail({
                    title:'微信登录失败',
                    duration:1000
                  })
                }
            });
        },
        //忘记密码
        forgetPassword:function(){
          api.openWin({
              name: 'forgotPassword',
              url: './headerone.html',
              pageParam: {
                  msg:'忘记密码',
                  url:'./forgotPassword.html'
              }
          });
        },
        clearPhoone:function(){
            this.phone= "";
        },
        isShowPassword:function(){
          if($('.registerPassword').attr('type')!='text'){
              $('.registerPassword').attr('type','text')
          }else{
              $('.registerPassword').attr('type','password')
          }
        },
      //普通登录
          mylogin:function(){
            var _this = this;
            if(_this.phone == ""){
              toast.fail({
                title:"手机号不能为空",
                duration:1000
              });
              return;
            }else if(!checkMobile(_this.phone)){
                  toast.fail({
                    title:"手机号格式不正确",
                    duration:1000
                  });
                  return;
            }
            if(_this.type==1){
              if(_this.password == ""){
                toast.fail({
                    title:"密码不能为空",
                    duration:1000
                  });
                }
              values={
                mobile: Base64.encode('UNO' + _this.phone + 'HACHA'),
                type: 1,
                password: Base64.encode('UNO' + _this.password + 'HACHA'),
                push_id: $api.getStorage('ajpushId')
              }
            }else if(_this.type==2){
              if(_this.code == ""){
                toast.fail({
                    title:"验证码不能为空",
                    duration:1000
                  });
                return;
              }
              values={
                mobile: Base64.encode('UNO' + _this.phone + 'HACHA'),
                type: 2,
                code:_this.code,
                push_id: $api.getStorage('ajpushId')
              }
            }
            api.ajax({
                url: window.Url.Freeuser_loginin,
                method: 'post',
                data: {
                  values: values
                }
              }, function(ret, err) {
                  // console.log(JSON.stringify(ret));
                  if(_this.type==2 && ret.re==0){
                    if(ret.info=="验证码已过期"){
                      toast.fail({
                      title:'验证码不能为空',
                      duration:1000
                    })
                  }else{
                    toast.fail({
                      title:ret.info,
                      duration:1000
                    })
                  }

                  }
                  if (ret.re==1){
                    //  console.log('登录-----' + JSON.stringify(ret))
                      $api.setStorage('token', ret.data.token);
                      $api.setStorage('user_id', ret.data.user_id);
                      $api.setStorage('rong-token', ret.data.chat_id);
                      $api.setStorage('user_name', ret.data.username);
                      $api.setStorage('user_data', ret.data);
                      var jsfun = 'window.location.reload();';
                      api.execScript({
                          name: 'root',
                          frameName: 'five_frame/index.html',
                          script: jsfun
                      });
                        api.ajax({
                            url: window.Url.Freegive_isReceive,
                            method: 'post',
                            data: {
                                values: {
                                  token:ret.data.token
                                },
                            }
                        },function(ret, err){
                            if (ret) {
                                console.log( JSON.stringify( ret ) );
                                if(ret.re=='1' && ret.data.is_receive=='1'){
                                  api.confirm({
                                      title: '提示',
                                      msg: '你有赠品可以领取',
                                      buttons: ['确定', '取消']
                                  }, function(ret, err){
                                      if( ret.buttonIndex==1 ){
                                         api.openWin({
                                            name: 'theGiftsHeader',
                                            url: 'five_frame_header2.html',
                                            pageParam: {
                                              type:'我的赠品',
                                              name:'theGifts'
                                            }
                                        });
                                      }else{
                                        api.closeWin({
                                              name: 'login'
                                          });
                                      }
                                  });
                                }
                            }
                        });


                  } else{
                    toast.fail({
                      title:ret.info,
                      duration:1000
                    })
                  }
              })


        },
        sendcode:function (){
          var _this = this;
          if(_this.phone==""){
            toast.fail({
              title:"请输入手机号",
              duration:1000
            });
            return;
          }
          if(_this.isclick){
            api.ajax({
               url: window.Url.Freeuser_getMessage,
               method: 'post',
               data: {
                 values: {
                    code: 'UNOHACHA',
                     mobile: Base64.encode('UNO' + _this.phone + 'HACHA'),
                     type: 2
                 }
               }
             }, function(ret, err) {
                 if (ret.re==1) {
                   _this.isclick = false;
                   var num = 60;
                   var time = setInterval(function(){
                       num--;
                       _this.codeMsg = num +'s';
                       if(num == 0){
                         clearInterval(time);
                         _this.codeMsg = '发送验证码';
                         _this.isclick = true;
                       }

                   },1000)
                   toast.success({
                     title:ret.info,
                     duration:1000
                   })
                 } else {
                   toast.fail({
                     title:ret.info,
                     duration:1000
                   })
                 }
             })
           }
        },



      },
      mounted:function(){
        var _this = this;
        var tab = new auiTab({
          element:document.getElementById("tab1")
        },function(ret){
          if(ret.index == 2){
              _this.type = 2;
              $api.css(login_content_2,'display:block');
              $api.css(login_content_1,'display:none');
          }else{
              _this.type = 1;
            $api.css(login_content_2,'display:none');
            $api.css(login_content_1,'display:block');
          }
        });
      },
      watch:{
        phone:function(val){
          if(val.length>11){
            this.phone=val.substring(0,11);
          }
        }
      }
    })
}
  </script>
  </html>
